
.search {
  position: relative;
  display: table;
  border-collapse: separate;
  margin: 0 auto;
  .input {
    display: flex;
    align-items: center;
    background-color: #fff;
    background-image: none;
    border: 1px solid #d5d5d5;
    border-radius: 5px 0 0 5px;
    padding: 0 0 0 7px;
    &.noSelect {
      padding: 0;
      input {
        border-radius: 5px 0 0 5px;
      }
    }
  }
  input {
    resize: none;
    position: relative;
    z-index: 2;
    width: 100%;
    height: 38px;
    padding: 6px 10px;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.42857143;
    color: #555;
    border: 0;
    display: table-cell;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    &:focus {
      z-index: 9;
      border: 0;
      outline: 0;
    }
    &::placeholder {
      transition: all .3s;
    }
    &:hover::placeholder {
      color: #d4d4d4;
    }
    &::placeholder {
      font-weight: normal;
    }
    &:focus::placeholder {
      color: #d4d4d4;
    }
  }
  .searchBtn {
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
    display: table-cell;
    button {
      margin: 0;
      left: -1px;
      position: relative;
      z-index: 5;
      display: inline-block;
      padding: 9px 23px;
      font-size: 14px;
      font-weight: bold;
      line-height: 1.42857143;
      text-align: center;
      text-rendering: auto;
      white-space: nowrap;
      vertical-align: middle;
      touch-action: manipulation;
      cursor: pointer;
      user-select: none;
      background-image: none;
      background-color: #fff;
      border: 1px solid transparent;
      border-collapse: separate;
      border-radius: 0 5px 5px 0;
      border-color: #d5d5d5;
      color: #333;
      box-shadow: inset 0 0 0 rgba(0,0,0,0.075), 0 0 0 0 rgba(102,175,233,0.5);
      transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
      &:hover, &:active, &:focus {
        color: #333;
        background-color: #e6e6e6;
      }
      &:hover {
        border-color: #b4b4b4;
      }
      &:active {
        border-color: #b4b4b4;
        background-image: none;
      }
      &:focus {
        outline: 0;
        border-color: #b4b4b4;
        text-decoration: none;
        box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 0 2px rgba(102,175,233,0.3);
      }
    }
  }
}
